<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-refresh" @click="handleRefresh">
        刷新
      </el-button>
      <el-input v-model="listQuery.searchMsg" placeholder="搜索名称" style="width: 200px;" class="filter-item filter-input"
                @keyup.enter.native="handleFilter"/>
      <el-button style="margin-left: 10px;" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item add" style="margin-left: 10px;margin-right: 10px" type="primary" icon="el-icon-circle-plus-outline"
                 @click="handleCreate">
        添加
      </el-button>


    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row

    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="50">
      </el-table-column>
      <!-- <el-table-column align="center" label="ID" width="95" >
        <template slot-scope="scope">
          {{ scope.row.Index }}
        </template>
      </el-table-column> -->

      <el-table-column label="住院号" width="160" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.hospitalNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>

        </template>
      </el-table-column>

      <el-table-column label="性别" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.age }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身高" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.stature }}</span>
        </template>
      </el-table-column>
      <el-table-column label="体重" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.weight }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手术日期"  align="center" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.surgeryDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="诊断" align="center">
        <template slot-scope="scope">
          <span>{{ truncatedText(scope.row.diagnosis) }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="创建时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.createdAt }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="updated_at" label="更新时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.updatedAt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="selectCase(row)">
            选择
          </el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row,$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="fetchData"/>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form ref="dataForm" :model="Form" label-position="left" label-width="90px"
      >

        <el-form-item label="住院号" prop="username">
          <el-input v-model="Form.hospitalNumber"/>
        </el-form-item>
        <el-form-item label="姓名" prop="username">
          <el-input v-model="Form.name"/>
        </el-form-item>
        <el-form-item label="年龄" prop="username">
          <el-input v-model="Form.age"/>
        </el-form-item>
        <el-form-item label="性别" prop="username">
          <el-input v-model="Form.sex"/>
        </el-form-item>
        <el-form-item label="身高" prop="username">
          <el-input v-model="Form.stature"/>
        </el-form-item>
        <el-form-item label="体重" prop="username">
          <el-input v-model="Form.weight"/>
        </el-form-item>
        <el-form-item label="手术日期" prop="username">
          <el-input v-model="Form.surgeryDate"/>
        </el-form-item>
        <el-form-item label="诊断" prop="username">
          <el-input v-model="Form.diagnosis"/>
        </el-form-item>
        <!--<el-form-item label="描述" prop="name">-->
        <!--<el-input v-model="Form.note"/>-->
        <!--</el-form-item>-->



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          提交
        </el-button>
      </div>
    </el-dialog>
    <h1>提示:选择病人进行创建信息收集表。</h1>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import {
    IgsCaseAPI
  } from '../../../api/igs/case'
  import {IgsConfigAPI} from '../../../api/igs/igsConfig'

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    components: {Pagination},
    name: 'user',
    data() {

      return {
        list: null,
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          limit: 10,
          searchMsg: '',
          orderby:'ORDER BY `id` DESC'
        },
        dialogFormVisible: false,
        dialogStatus: "create",
        title: "",

        Form: {
          id: null,
          surgeryDate: '',
          hospitalNumber: '',
          name: '',
          sex: '',
          weight: '',
          age: '',
          stature: '',
          diagnosis: ''

        },
        roles: null,
        caseJson: {
          caseValue:[]
        },
        itemJson: {
          itemValue:[]
        },
        caseList: null,
        itemList: null,
        typeValues: [
          {value: '文本'},
          {value: '数字'},
          {value: '时间'},
          {value: '日期'},
          {value: '单选'},
          {value: '多选'}
        ],
        addJson: {
          id: '',
          name: '',
          value: '',
          valueType: ''
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {

      selectCase(item){
        this.$store.dispatch('casep/updateCaseMsg', item)
        console.log('Case:',this.$store.getters['casep/getCaseMsg']);
        this.$router.push({ path: '/report/igs/report' })
      },

      truncatedText(longText) {
        return longText.length > 30 ? longText.slice(0, 30) + '...' : longText;
      },

      fetchData() {
        this.listLoading = true
        IgsCaseAPI.hasAllToPage(this.listQuery).then(response => {
          let list = response.data.list
          const data = list
          this.list = data
          this.total = response.data.queryTotal
          this.listQuery.page = response.data.page
          setTimeout(() => {
            this.listLoading = false
          }, 0.3 * 1000)
        })


      },

      handleFilter() {
        //搜索
        this.listQuery.page = 1
        this.listQuery.searchMsg = this.listQuery.searchMsg.trim()
        this.fetchData()
      },
      handleCreate() {
        //新增
        console.log('in to handleCreate');
        this.title = "添加"
        this.dialogStatus = 'create'
        this.Form = {
          id: null,
          surgeryDate: '',
          hospitalNumber: '',
          name: '',
          sex: '',
          weight: '',
          age: '',
          stature: '',
          diagnosis: ''
        }

        console.log('this.Form',this.Form);
        this.dialogFormVisible = true
        // setTimeout(() => {
        //   this.$refs['dataForm'].clearValidate();
        // }, 300)
      },
      handleUpdate(row) {
        console.log('in to handleUpdate');
        //编辑
        this.dialogFormVisible = true
        this.title = "修改"
        this.dialogStatus = 'update'
        this.Form = {
          id: row.id,
          surgeryDate: row.surgeryDate,
          hospitalNumber: row.hospitalNumber,
          name: row.name,
          sex: row.sex,
          weight: row.weight,
          age: row.age,
          stature: row.stature,
          diagnosis: row.diagnosis
        }


        console.log(this.Form)
      },
      handleDelete(row, index) {
        //删除
        this.$confirm('确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          IgsCaseAPI.delete({id: row.id}).then(() => {
            this.$notify({
              title: 'Success',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.list.splice(index, 1)
          })
        }).catch(() => {
        });
      },
      handleRefresh() {
        //列表刷新
        this.fetchData()
      },

      createData() {
        console.log('in to updateData');
        console.log('this.Form', this.Form);

        console.log('this.Form', this.Form);
        IgsCaseAPI.add(this.Form).then(() => {
          this.fetchData()
          this.dialogFormVisible = false
        })
      },
      updateData() {
        console.log('in to updateData');
        console.log('this.Form', this.Form);

        console.log('this.Form', this.Form);
        IgsCaseAPI.update(this.Form).then(() => {
          this.fetchData()
          this.dialogFormVisible = false
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .filter-container {
    .filter-item {
      margin-bottom: 10px;
    }
    .filter-input {
      margin-left: 20px;
    }
    .add {
      float: right;
    }
  }

  .addBox {
    width: 100%;
    button {
      width: 300px;
      margin: 10px auto;
      position: relative;
      display: block;
    }
  }
</style>
